<template>
    <view class="out">
        <input type="text" v-model="firstName"/>
		<input type="text" v-model="lastName"/>
		<view>全称:{{fullName}}</view>
    </view>
</template>

<script setup>
import { computed, ref, watch, watchEffect } from 'vue';

const firstName = ref("勒布朗")
const lastName = ref("詹姆斯")
// 计算属性在template引用直接fullName，不需要用方法fullName()带括号
// 计算属性是带有缓存的，方法是调用一次就计算一次。
const fullName = computed(()=> firstName.value + "·" + lastName.value)	

// 多个参数联合监听
// watch([firstName,lastName],([nFirstName,nLaseName],[oFirstName,oLastName])=>{
// 	console.log(nFirstName + '-' + oFirstName);
// 	console.log(nLaseName + '-' + oLastName);
// })

watchEffect(()=>{
	console.log(firstName.value + '---' + lastName.value);
})
</script>

<style lang="scss" scoped>
.out {
	padding: 20px 10px;
	input {
		background: #eeeeee;
		border: 2px solid saddlebrown;
		height: 40px;
		margin: 10px 0;
		padding: 0 15px;
	}
}
</style>
